import * as React from 'react';
import HomeHeader from './HomeHeader';
import HomeSwiper from './HomeSwiper';
import { connect } from 'react-redux';
import actions from '../../store/actions/Home';
import { Store } from '../../types';
import './index.less';
import HomeLesson from './HomeLesson';
import { loadMore, downRefresh } from '../../common/utils'

interface Props {
  category: string,
  setCategory: any,
  getSliders: any,
  getLessons: any,
  reGetLessons: any,
  sliders: string[],
  lessons: Store['Home']['lessons']
}

class Home extends React.Component<Props> {
  componentDidMount() {
    if (this.props.sliders.length > 0) {
      this.mainContent.scrollTop = +sessionStorage.getItem('homeScrollTop');
    } else {
      this.props.getSliders();
      this.props.getLessons();
    }
    loadMore(this.mainContent, this.props.getLessons)
    downRefresh(this.mainContent, this.props.reGetLessons)
  }
  componentWillUnmount() {
    sessionStorage.setItem('homeScrollTop', this.mainContent.scrollTop + '');
  }
  mainContent: HTMLDivElement
  render() {
    let { category, setCategory, sliders, lessons } = this.props;
    return (
      <React.Fragment>
        <HomeHeader category={category} setCategory={setCategory} />
        <div className="main-content" ref={dom => this.mainContent = dom}>
          <HomeSwiper sliders={sliders} />
          <HomeLesson lessons={lessons} />
        </div>
      </React.Fragment>
    )
  }
}

export default connect((state: Store): Store['Home'] => {
  return state.Home
}, actions)(Home);
